<template>
  <f7-page class="bg-color-white">
    <f7-navbar :title="$t('m.od1')" back-link=" "></f7-navbar>
    <div class="orders-list">
      <p class="status-p">{{$t('m.o7')}}：{{details.no}} <span>{{details.status | orderStatus}}</span></p>
      <van-card
        :num="details.num"
        :title="details.gname"
        :thumb="details.pic"
      >
        <div slot="price">
          <h2 class="order-price">{{details.money}} {{$t('m.o8')}}</h2>
        </div>
      </van-card>
      <f7-block-title class="shouhuo-title">{{$t('m.od2')}}</f7-block-title>
      <div class="address-box">
        <p>{{details.get_name}} <span>{{details.get_phone}}</span></p>
        <p>{{details.get_address}}</p>
      </div>

      <div class="content-padding margin-t80">
        <f7-button fill color="blue" large round @click="$f7router.back()">{{$t('m.back')}}</f7-button>
      </div>
    </div>

  </f7-page>
</template>

<script>
  import { getOrderDetail } from "../api/my";

  export default {
    name: "orderDetails",
    data() {
      return {
        details: {}
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        getOrderDetail({order_id: this.$f7route.context.order_id}).then(res => {
          this.details = res.data;
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .shouhuo-title {
    margin: 0;
    background: $colorGrey2;
    padding: $padding20;
    color: $mainColor2;
  }
  .address-box {
    padding: $padding20;
    p {
      display: flex;
      justify-content: space-between;
      margin-bottom: $padding20;
      font-size: 30px;
    }
  }
</style>
